<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<!--引入react核心包-->
<script src="../../javascript/react.js"></script>
<!--引入react-dom包-->
<script src="../../javascript/react-dom.js"></script>
<!--引入babel包-->
<script src="../../javascript/babel.js"></script>
<script type="text/babel">
    /*
    * 一：createRoot(domNode，options?)
    *   允许在浏览器的DOM节点中创建根节点以显示React组件
    *   React将会为domNode创建一个根节点，并控制其中的DOM。在已经创建根节点之后，需要调用 root.render()来显示React组件
    * 二：root.render(reactNode)
    *   调用root.render以将一段JSX（“React 节点”）在 React的根节点中渲染为 DOM 节点并显示。
    *三：root.unmount()
    *   调用 root.unmount 以销毁 React 根节点中的一个已经渲染的树
    * */
    class App extends React.Component {
        constructor(props) {
            super(props)
            // constructor方法this指向为App组件
            //组件的数据
            this.state={text:"hello-react"}
        }

        render() {
            // render方法this指向为App组件实例
            const {text}=this.state
            return (
                <div>
                    <h1>{text}</h1>
                    <button onClick={()=>this.changeText()}>切换文本</button>
                </div>
            );
        }

        changeText() {
            // 事件绑定里的方法默认指向的为undefined(类里面的方法开启了严格模式+babel的存在)
            this.setState({text:"李银河"}) // setState()会做两件事：1.修改状态，2.调用render()更新视图
        }
    }
    // 创建一个根节点
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    // 渲染App组件
    root.render(<App/>)
    // 销毁组件
    // root.unmount()
</script>
</body>
</html>
